<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮排它</title>
    <style>
    </style>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>

<script>
    // 获取dom标签元素
    const btn = document.querySelectorAll('button');

    // 使用for循环遍历btn伪数组中的按钮元素 除了用添加类名设置样式，这种方法需要用双重for循环来实现排它效果。
    /* for (let index = 0; index < btn.length; index++) {
        // 给遍历的每个按钮绑定点击事件
        btn[index].addEventListener('click', function () {
            for (let i = 0; i < btn.length; i++) {
                btn[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        });
    }; */

    // forEach循环遍历方法
    btn.forEach((value) => {
        value.addEventListener('click', () => {
            for (let index = 0; index < btn.length; index++) {
                btn[index].style.backgroundColor = '';
            };
            value.style.backgroundColor = 'pink';
        });
    });
</script>

</html>